<template>
      <!-- 
          :inline ： 行内表单模式
          :model  form绑定的数据 
          size 大小
       -->
    <el-form :inline="true" :model="formInline"  class="demo-form-inline" size="small ">
          <el-form-item label="一级分类">
              <!-- v-model 获取客户选择的数据  需要配合option的 value属性
                    change事件  当数据改变时  则调用该方法
                    :disabled  是否禁用该输入框  接收父组件传入的数据
                    :popper-append-to-body='false'     select下拉框出现位置问题则需要用到这个 
              -->
            <el-select  placeholder="请选择" v-model="category1Id" @change="getCateGory1" :disabled='Setdisabled' 
                :popper-append-to-body='false'>
                <!-- 循环遍历传入的数据 -->
                <el-option 
                    v-for="getSelect1 in formInline.getCateGorySelect1"
                    :key="getSelect1.id"
                    :label="getSelect1.name" 
                    :value="getSelect1.id" 
                    >
                </el-option>
            </el-select>
         </el-form-item>
         <el-form-item label="二级级分类">
             <!-- 当选择了id2  时   则调用该方法 -->
            <el-select  placeholder="请选择" v-model="category2Id" @change="getCateGory2" :disabled='Setdisabled' :popper-append-to-body='false'> 
                <!-- 循环遍历传入的数据 -->
                <el-option 
                    :label="getSelect2.name" 
                    :value="getSelect2.id" 
                    v-for="getSelect2 in formInline.getCateGorySelect2"
                    :key="getSelect2.id"
                    >
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="三级分类">
              <!-- 当选择了id3  时   则调用该方法 -->
            <el-select  placeholder="请选择" v-model="category3Id" @change="OutCateGory" popper-class='select' :disabled='Setdisabled' :popper-append-to-body='false'> 
                <!-- 循环遍历传入的数据 -->
                <el-option 
                    :label="getSelect3.name" 
                    :value="getSelect3.id" 
                    v-for="getSelect3 in formInline.getCateGorySelect3"
                    :key="getSelect3.id"
                >
                </el-option>
            </el-select>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    name:'CateGorySelect',
    // 接收父组件传入子组件的数据
    props:['Setdisabled'],
    data() {
        return {
            formInline:{
                // 获取接口get1返回的数据
                getCateGorySelect1:[],
                // 获取接口get2返回的数据
                getCateGorySelect2:[],
                // 获取接口get3返回的数据
                getCateGorySelect3:[]
            },
            // 获取客户选择get1的数据 ID
            category1Id:'',
            // 获取客户选择get2的数据  ID
            category2Id:'',
            // 获取客户选择 get3 的数据  ID
            category3Id:''
        }
    },
    mounted() {
        // 调用获取get1的请求
        this.getCateGory()
    },
    methods: {
        // 发送get1的数据接口请求
       async getCateGory(){
          let result =  await this.$API.attr.getCategory1();
          if (result.code == 200) {
            //   把获取的数据赋值到data里
              this.formInline.getCateGorySelect1 = result.data
          }
        },
        // 发送get2的数据接口请求 如果客户选择好了则发送该请求
       async getCateGory1(){
            let result = await this.$API.attr.getCategory2(this.category1Id)
            // 如果客户选择完了id3后 又返回选择id1 时 则请求之前的数据id2 、id3 清空
            this.category2Id=''
            this.category3Id=''
            if (result.code == 200) {
            // 把获取的数据赋值给data里
                this.formInline.getCateGorySelect2 = result.data
            }
        },
        //发送get3的数据接口情况 如果客户选择好了则发送该请求
       async getCateGory2(){
          let result = await this.$API.attr.getCategory3(this.category2Id)
           // 如果客户选择完了id3后 又返回选择id2 时 则请求之前的数据id3 清空
          this.category3Id=''
          if (result.code == 200) {
            //   把获取的数据赋值给data里
              this.formInline.getCateGorySelect3 = result.data
          }
        },
        // 当客户选完了id3时 调用方法
        OutCateGory(){
            // 发送id1、id2、id3 给父组件
            this.$emit('GetCategorySelectId',{category1Id:this.category1Id,category2Id:this.category2Id,category3Id:this.category3Id})
        }
    },
}
</script>

<style scoped>
    /* 下拉框出现位置不正常情况  （该用法也没有完全解决  因为滚动条变化会影响下拉框位置） */
   /deep/.el-select-dropdown{
        position: absolute !important;
        /* top: 30px !important; */
        left: 0px !important;
    }
    
</style>